<template>
  <div>
    <el-dialog
      title="修改"
      :close-on-click-modal="false"
      :visible.sync="visible">

      <div style="display: flex;align-items: center;justify-content: space-between">
          <div style="margin-right: 100px">学生id:{{ currentStuId }}</div>
          <div style="margin-right: 100px">学生名称:{{ currentStuName }}</div>
          <div>关键词个数:  <el-select style="width: 130px;" v-model="currentKeyCount" placeholder="总关键词个数">
            <el-option :value="15" label="15"/>
            <el-option :value="16" label="16"/>
            <el-option :value="17" label="17"/>
            <el-option :value="18" label="18"/>
          </el-select></div>
      </div>
      <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px">
        <div style="display: flex;width: 80%;">
          <div style="margin-right: 10px">智育关键词</div>
          <div style="overflow-x: auto ;width: 80%;display: flex">
            <el-tag closable @close="closeTag(item.id,1)" v-for="(item,index) in keys.edu1Keys" :key="index"
                    style="margin-right: 20px">{{ item.keys }}
            </el-tag>
          </div>
        </div>
        <div style="width: 10%;">
          <el-button type="primary" @click="add('智育')">添加</el-button>
        </div>
      </div>

      <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px">
        <div style="display: flex;width: 80%;">
          <div style="margin-right: 10px">德育关键词</div>
          <div style="overflow-x: auto ;width: 80%;display: flex">
            <el-tag closable @close="closeTag(item.id,2)" v-for="(item,index) in keys.edu2Keys" :key="index"
                    style="margin-right: 20px">{{ item.keys }}
            </el-tag>
          </div>
        </div>
        <div style="width: 10%;">
          <el-button type="primary" @click="add('德育')">添加</el-button>
        </div>
      </div>


      <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px">
        <div style="display: flex;width: 80%;">
          <div style="margin-right: 10px">体育关键词</div>
          <div style="overflow-x: auto ;width: 80%;display: flex">
            <el-tag closable @close="closeTag(item.id,3)" v-for="(item,index) in keys.edu3Keys" :key="index"
                    style="margin-right: 20px">{{ item.keys }}
            </el-tag>
          </div>
        </div>
        <div style="width: 10%;">
          <el-button type="primary" @click="add('体育')">添加</el-button>
        </div>
      </div>

      <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px">
        <div style="display: flex;width: 80%;">
          <div style="margin-right: 10px">美育关键词</div>
          <div style="overflow-x: auto ;width: 80%;display: flex">
            <el-tag closable @close="closeTag(item.id,4)" v-for="(item,index) in keys.edu4Keys" :key="index"
                    style="margin-right: 20px">{{ item.keys }}
            </el-tag>
          </div>
        </div>
        <div style="width: 10%;">
          <el-button type="primary" @click="add('美育')">添加</el-button>
        </div>
      </div>

      <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px">
        <div style="display: flex;width: 80%;">
          <div style="margin-right: 10px">劳育关键词</div>
          <div style="overflow-x: auto ;width: 80%;display: flex">
            <el-tag closable @close="closeTag(item.id,5)" v-for="(item,index) in keys.edu5Keys" :key="index"
                    style="margin-right: 20px">{{ item.keys }}
            </el-tag>
          </div>
        </div>
        <div style="width: 10%;">
          <el-button type="primary" @click="add('劳育')">添加</el-button>
        </div>
      </div>

      <el-button type="primary" @click="dataFormSubmit">确定修改</el-button>
    </el-dialog>

    <div>
      <el-dialog
        title="提示"
        :visible.sync="addVisible"
        width="30%"
      >

        <el-form title="德育" ref="form" :model="addForm" label-width="80px">

          <el-form-item label="所属主题">
            <el-select v-if="radio!=='从我的词库中选择'" @change="changeEdutheme" v-model="addForm.edutheme"
                       placeholder="请选择所属主题">
              <el-option v-for="(value,key) in keysMap[type]" :key="key" :label="key" :value="key"></el-option>
            </el-select>

            <el-select v-if="radio==='从我的词库中选择'" @change="changeEdutheme" v-model="addForm.edutheme"
                       placeholder="请选择所属主题">
              <el-option v-for="(value,key) in keysMapByCreate[type]" :key="key" :label="key" :value="key"></el-option>
            </el-select>

          </el-form-item>

          <el-form-item label="所属层面">
            <el-select v-if="radio!=='从我的词库中选择'" @change="changeAspect" v-model="addForm.aspect"
                       placeholder="请选择所属层面">
              <template @change="addForm.key=''" v-if="addForm.edutheme!==''">
                <el-option v-for="(value,key) in keysMap[type][addForm.edutheme]" :key="key" :label="key"
                           :value="key"></el-option>
              </template>
            </el-select>

            <el-select v-if="radio==='从我的词库中选择'" @change="changeAspect" v-model="addForm.aspect"
                       placeholder="请选择所属层面">
              <template @change="addForm.key=''" v-if="addForm.edutheme!==''">
                <el-option v-for="(value,key) in keysMapByCreate[type][addForm.edutheme]" :key="key" :label="key"
                           :value="key"></el-option>
              </template>
            </el-select>

          </el-form-item>

          <el-form-item label="等级">
            <el-select v-model="addForm.keysLevel" placeholder="等级">
              <el-option label="优秀" value="优秀"></el-option>
              <el-option label="中等" value="中等"></el-option>
              <el-option label="偏差" value="偏差"></el-option>
              <el-option label="无" value="无"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item>
            <template slot="label">
              <el-radio @click="restAddForm" v-model="radio" label="新关键词"></el-radio>
            </template>
            <el-select v-model="addForm.key" placeholder="关键词">
              <template
                v-if="addForm.aspect!=='' && addForm.keysLevel!=='' && keysMap[type][addForm.edutheme][addForm.aspect]">
                <el-option v-for="(item,index) in keysMap[type][addForm.edutheme][addForm.aspect][addForm.keysLevel]"
                           :key="index" :label="item.keys" :value="item.easCommentKeysId"></el-option>
              </template>
            </el-select>
          </el-form-item>

          <el-form-item>
            <template slot="label">
              <el-radio @click="restAddForm" v-model="radio" label="从我的词库中选择"></el-radio>
            </template>
            <el-select v-model="addForm.userKey" placeholder="关键词">
              <template
                v-if="addForm.aspect!=='' && addForm.keysLevel!=='' && keysMapByCreate[type] && keysMapByCreate[type][addForm.edutheme] &&  keysMapByCreate[type][addForm.edutheme][addForm.aspect]">
                <el-option
                  v-for="(item,index) in keysMapByCreate[type][addForm.edutheme][addForm.aspect][addForm.keysLevel]"
                  :key="index" :label="item.keys" :value="item.easCommentKeysId"></el-option>
              </template>
            </el-select>
          </el-form-item>

          <el-form-item>
            <template slot="label">
              <el-radio @click="restAddForm" v-model="radio" label="自定义"></el-radio>
            </template>
            <el-input v-model="userKey" placeholder="关键词"></el-input>
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addKey">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>

</template>


<script>
export default {
  name: 'eas-edit-keys',
  props: {},
  data () {
    return {
      visible: false,
      radio: '新关键词',
      type: '',
      dataRule: {},
      addVisible: false,
      addForm: {
        edutheme: '',
        aspect: '',
        keysLevel: '',
        key: '',
        createKeys: ''
      },
      keys: {
        keysLevel: '',
        educationId: '',
        eduthemeId: '',
        eduaspectId: '',
        edu1Num: 0,
        edu2Num: 0,
        edu3Num: 0,
        edu4Num: 0,
        edu5Num: 0,
        edu1Ids: '',
        edu2Ids: '',
        edu3Ids: '',
        edu4Ids: '',
        edu5Ids: '',
        edu1Keys: [],
        edu2Keys: [],
        edu3Keys: [],
        edu4Keys: [],
        edu5Keys: []
      },
      currentKeyCount: 0, // 当前学生的关键词个数
      currentStuName: '', // 当前学生的关键词个数
      currentStuId: '', // 当前学生的关键词个数
      userKey: '', // 用户自定义关键词
      keysMap: {}, // 关键词map
      keysMapByCreate: {}, // 当前用户的创建的自定义map
      comment: {}
    }
  },
  methods: {
    restAddForm () {
      this.addForm = {
        edutheme: '',
        aspect: '',
        keysLevel: '',
        key: '',
        createKeys: ''
      }
    },
    dataFormSubmit () {
      if (this.currentKeyCount <= 0) {
        this.$message.error('关键词个数不能小于0')
        return
      }
      const keys = []
      this.keys.edu1Keys.forEach(item => {
        keys.push(item.keys)
      })
      this.keys.edu2Keys.forEach(item => {
        keys.push(item.keys)
      })
      this.keys.edu3Keys.forEach(item => {
        keys.push(item.keys)
      })
      this.keys.edu4Keys.forEach(item => {
        keys.push(item.keys)
      })
      this.keys.edu5Keys.forEach(item => {
        keys.push(item.keys)
      })
      if (keys.length !== this.currentKeyCount) {
        this.$message.error('总关键词个数不匹配')
        return
      }
      const data = {
        id: this.commentId,
        edu1Ids: this.keys.edu1Keys.map(item => item.id).join(','),
        edu2Ids: this.keys.edu2Keys.map(item => item.id).join(','),
        edu3Ids: this.keys.edu3Keys.map(item => item.id).join(','),
        edu4Ids: this.keys.edu4Keys.map(item => item.id).join(','),
        edu5Ids: this.keys.edu5Keys.map(item => item.id).join(','),
        edu1Num: this.keys.edu1Keys.length,
        edu2Num: this.keys.edu2Keys.length,
        edu3Num: this.keys.edu3Keys.length,
        edu4Num: this.keys.edu4Keys.length,
        edu5Num: this.keys.edu5Keys.length,
        keywords: keys.length > 0 ? keys.join(',') : '',
        keywordsNum: keys.length
      }
      console.log(data)
      this.$http({
        url: this.$http.adornUrl('/eas/easstucomments/update'),
        method: 'post',
        data: this.$http.adornData(data)
      }).then(({data}) => {
        if (data.code === 0) {
          this.$message.success('修改成功')
          this.addForm = {
            edutheme: '',
            aspect: '',
            keysLevel: '',
            key: ''
          }
          this.$emit('refreshDataList')
          this.visible = false
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    add (type) {
      this.type = type
      this.addForm = {
        edutheme: '',
        aspect: '',
        keysLevel: '',
        key: '',
        createKeys: ''
      }
      this.addVisible = true
    },
    init (id, stuId, keyCount) {
      this.commentId = id
      this.currentKeyCount = keyCount
      this.$http({
        url: this.$http.adornUrl('/eas/eascommentkeys/keys'),
        method: 'get'
      }).then(({data}) => {
        if (data.code === 0) {
          this.keysMap = data.keys
        } else {
          this.$message.error(data.msg)
        }
      })
      this.$http({
        url: this.$http.adornUrl(`/eas/easbasicstu/info/${stuId}`),
        method: 'get'
      }).then(({data}) => {
        if (data.code === 0) {
          this.currentStuId = data.easBasicStu.stuId
          this.currentStuName = data.easBasicStu.name
        } else {
          this.$message.error(data.msg)
        }
      })
      this.$http({
        url: this.$http.adornUrl('/eas/eascommentkeys/keysByCreate'),
        method: 'get'
      }).then(({data}) => {
        if (data.code === 0) {
          this.keysMapByCreate = data.keys
        } else {
          this.$message.error(data.msg)
        }
      })
      this.loadCommentKeys(this.commentId)
    },
    addKey: function () {
      if (this.radio === '自定义') {
        console.log(this.keysMap)
        const data = {
          aspectStr: this.addForm.aspect,
          keys: this.userKey,
          keysLevel: this.addForm.keysLevel,
          type: 1,
          status: 0
        }
        this.$http({
          url: this.$http.adornUrl('/eas/eascommentkeys/addNewKey'),
          method: 'post',
          data: this.$http.adornData(data)
        }).then(({data}) => {
          if (data.code === 0) {
            this.$message.success('新增成功,等待管理员审核')
            this.addVisible = false
          } else {
            this.$message.error(data.msg)
          }
        })
      } else if (this.radio === '新关键词') {
        const data = {
          id: '',
          keys: ''
        }
        const result = this.keysMap[this.type][this.addForm.edutheme][this.addForm.aspect][this.addForm.keysLevel]
        result.find(item => {
          if (item.easCommentKeysId === this.addForm.key) {
            data.keys = item.keys
          }
        })
        data.id = this.addForm.key
        switch (this.type) {
          case '智育':
            const findOne = this.keys.edu1Keys.find(i => i.keys === data.keys)
            if (findOne) {
              this.$message.error('该关键词已存在')
              return
            }
            this.keys.edu1Keys.push(data)
            break
          case '德育':
            const findOne2 = this.keys.edu2Keys.find(i => i.keys === data.keys)
            if (findOne2) {
              this.$message.error('该关键词已存在')
              return
            }
            this.keys.edu2Keys.push(data)
            break
          case '体育':
            const findOne3 = this.keys.edu3Keys.find(i => i.keys === data.keys)
            if (findOne3) {
              this.$message.error('该关键词已存在')
              return
            }
            this.keys.edu3Keys.push(data)
            break
          case '美育':
            const findOne4 = this.keys.edu4Keys.find(i => i.keys === data.keys)
            if (findOne4) {
              this.$message.error('该关键词已存在')
              return
            }
            this.keys.edu4Keys.push(data)
            break
          case '劳育':
            const findOne5 = this.keys.edu5Keys.find(i => i.keys === data.keys)
            if (findOne5) {
              this.$message.error('该关键词已存在')
              return
            }
            this.keys.edu5Keys.push(data)
            break
        }
      } else if (this.radio === '从我的词库中选择') {
        const data = {
          id: '',
          keys: ''
        }
        const result = this.keysMapByCreate[this.type][this.addForm.edutheme][this.addForm.aspect][this.addForm.keysLevel]
        result.find(item => {
          if (item.easCommentKeysId === this.addForm.userKey) {
            data.keys = item.keys
          }
        })
        data.id = this.userKey
        switch (this.type) {
          case '智育':
            const findOne = this.keys.edu1Keys.find(i => i.keys === data.keys)
            if (findOne) {
              this.$message.error('该关键词已存在')
              return
            }
            this.keys.edu1Keys.push(data)
            break
          case '德育':
            const findOne2 = this.keys.edu2Keys.find(i => i.keys === data.keys)
            if (findOne2) {
              this.$message.error('该关键词已存在')
              return
            }
            this.keys.edu2Keys.push(data)
            break
          case '体育':
            const findOne3 = this.keys.edu3Keys.find(i => i.keys === data.keys)
            if (findOne3) {
              this.$message.error('该关键词已存在')
              return
            }
            this.keys.edu3Keys.push(data)
            break
          case '美育':
            const findOne4 = this.keys.edu4Keys.find(i => i.keys === data.keys)
            if (findOne4) {
              this.$message.error('该关键词已存在')
              return
            }
            this.keys.edu4Keys.push(data)
            break
          case '劳育':
            const findOne5 = this.keys.edu5Keys.find(i => i.keys === data.keys)
            if (findOne5) {
              this.$message.error('该关键词已存在')
              return
            }
            this.keys.edu5Keys.push(data)
            break
        }
      }
    },
    changeEdutheme () {
      this.addForm.aspect = ''
      this.addForm.keysLevel = ''
      this.addForm.key = ''
    },
    loadCommentKeys (commentId) {
      this.$http({
        url: this.$http.adornUrl(`/eas/easstucomments/info/${commentId}`),
        method: 'get'
      }).then(({data}) => {
        if (data.code === 0) {
          this.keys = data.easStuComments
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    closeTag (id, index) {
      if (index === 1) {
        this.keys.edu1Keys = this.keys.edu1Keys.filter(item => item.id !== id)
      } else if (index === 2) {
        this.keys.edu2Keys = this.keys.edu2Keys.filter(item => item.id !== id)
      } else if (index === 3) {
        this.keys.edu3Keys = this.keys.edu3Keys.filter(item => item.id !== id)
      } else if (index === 4) {
        this.keys.edu4Keys = this.keys.edu4Keys.filter(item => item.id !== id)
      } else if (index === 5) {
        this.keys.edu5Keys = this.keys.edu5Keys.filter(item => item.id !== id)
      }
    },
    changeAspect () {
      this.addForm.keysLevel = ''
      this.addForm.key = ''
    }

  },
  mounted () {
  }
}
</script>

<style scoped lang="scss">

</style>
